<template>
  <div class="page-gird-container" v-if="!updateMobile && !email">
    <div class="title">个人信息</div>
    <Form :model="personalData" :label-width="82" label-position="right">
      <FormItem label="账号ID：">
        <Input
          v-model="personalData.uuid"
          :border="false"
          :readonly="true"
        ></Input>
      </FormItem>
      <FormItem label="名称：">
        <Input
          v-model="personalData.name"
          :border="false"
          :readonly="true"
        ></Input>
      </FormItem>
      <FormItem label="认证信息：">
        <Input
          v-model="personalData.authentication"
          :border="false"
          :readonly="true"
        ></Input>
      </FormItem>
      <FormItem label="手机号码：">
        <Input
          v-model="personalData.mobile"
          :border="false"
          :readonly="true"
          style="width: 100px"
        ></Input>
        <span style="color: #08f; cursor: pointer" @click="toUpdateMobile"
          >修改></span
        >
      </FormItem>
      <FormItem label="电子邮箱：">
        <Input
          v-if="personalData.email"
          v-model="personalData.email"
          :border="false"
          :readonly="true"
        ></Input
        >
        <span v-if="!personalData.email" style="color: #08f; cursor: pointer" @click="toEmail"
          >绑定></span
        >
        <span v-else style="color: #08f; cursor: pointer" @click="toEmail"
          >修改></span
        >
      </FormItem>
      <div v-if="!update">
        <FormItem label="QQ号码：">
          <Input
            v-model="personalData.qq"
            :border="false"
            :readonly="true"
          ></Input>
        </FormItem>
        <FormItem label="所在地区：">
          <Input v-model="address" :border="false" :readonly="true"></Input>
        </FormItem>
        <FormItem label="详细地址：">
          <Input
            v-model="personalData.address"
            :border="false"
            :readonly="true"
          ></Input>
        </FormItem>
        <FormItem label="业务简介：">
          <Input
            v-model="personalData.description"
            :border="false"
            :readonly="true"
          ></Input>
        </FormItem>
        <Button type="primary" @click="update = true">修改信息</Button>
      </div>
      <div v-else>
        <FormItem label="QQ号码：">
          <Input v-model="personalData.qq" style="width: 250px"></Input>
        </FormItem>
        <FormItem label="所在地区：">
          <Cascader :data="district" v-model="value" v-width="250" />
        </FormItem>
        <FormItem label="详细地址：">
          <Input v-model="personalData.address" style="width: 350px"></Input>
        </FormItem>
        <FormItem label="业务简介：">
          <Input
            v-model="personalData.description"
            type="textarea"
            style="width: 350px"
          ></Input>
        </FormItem>
        <Button type="primary" style="margin-right: 10px" @click="submit"
          >保存信息</Button
        >
        <Button @click="update = false">取消</Button>
      </div>
    </Form>
  </div>
  <!-- 修改手机号 -->
  <div class="page-gird-container" v-if="updateMobile && !newMobile">
    <Form
      ref="formValidate"
      :model="oldCaptcha"
      :rules="mobileRuleValidate"
      :label-width="107"
      label-position="right"
    >
      <FormItem label="原手机号码：">
        <Input
          v-model="personalData.mobile"
          :border="false"
          :readonly="true"
        ></Input>
      </FormItem>
      <FormItem label="手机验证码：" prop="captcha">
        <Input v-model="oldCaptcha.captcha" style="width: 200px"></Input>
        <span v-show="show" @click="sms_captcha" style="cursor: pointer"
          >获取验证码</span
        >
        <span v-show="!show" class="count">{{ count }}s后重新获取</span>
      </FormItem>
      <Button style="margin-left: 107px" type="primary" @click="toNext"
        >下一步</Button
      >
    </Form>
  </div>
  <div class="page-gird-container" v-if="newMobile">
    <div style="width: 400px !important">
      <Login @on-submit="handleSubmit">
        <Mobile name="mobile" placeholder="请输入新手机号"></Mobile>
        <Captcha
          class="demo-login-captcha picCaptcha"
          name="picCaptcha"
          @on-get-captcha="handlePicCaptcha"
        >
          <template #text>
            <img :src="captchaPicture.base64" />
          </template>
        </Captcha>
        <Captcha
          name="phoneCaptcha"
          :field="['mobile', 'picCaptcha']"
          enter-to-submit
          @on-get-captcha="handlePhoneCaptcha"
        />
        <Submit>绑定新手机号码</Submit>
      </Login>
    </div>
  </div>
  <!-- 修改邮箱 -->
  <div class="page-gird-container" v-if="email">
    <Form
      ref="emailValidate"
      :model="newEmail"
      :rules="emailRuleValidate"
      :label-width="80"
      label-position="right"
    >
      <FormItem label="原邮箱：">
        <Input
          v-model="personalData.email"
          :border="false"
          :readonly="true"
        ></Input>
      </FormItem>
      <FormItem label="新邮箱：" prop="email">
        <Input v-model="newEmail.email" style="width: 200px"></Input>
      </FormItem>
      <FormItem label="验证码：" prop="captcha">
        <Input v-model="newEmail.captcha" style="width: 200px"></Input>
        <span v-show="show" @click="email_captcha" style="cursor: pointer"
          >获取验证码</span
        >
        <span v-show="!show" class="count">{{ count }}s后重新获取</span>
      </FormItem>
      <Button type="primary" style="margin-left: 80px" @click="updateEmail"
        >完成</Button
      >
    </Form>
  </div>
</template>

<script>
    import {
        memberInfo,
        memberupdateInfo,
        memberSmsCaptcha,
        memberUpdatePhone,
        captchaUniversalSms,
        captchaUniversalMail,
        memberUpdateEmail,
        memberSmsValidate,
    } from "@/api/set";
    import { setInfo } from "@/libs/userInfo";
    import { AccountCaptchaPicture } from "@/api/account";
    import district from "@/assets/district.json";
    import cookies from "@/libs/util.cookies";

    export default {
        name: "set-personalData",
        data() {
            return {
                show: true,
                count: "",
                captchaPicture: {},
                personalData: {},
                update: false,
                updateMobile: false,
                newMobile: false,
                email: false,
                address: "",
                value: [],
                district: [],
                oldCaptcha: {
                    captcha: "",
                },
                newCaptcha: {
                    mobile: "",
                    captcha: "",
                },
                newEmail: {
                    email: "",
                    captcha: "",
                },
                mobileRuleValidate: {
                    captcha: [
                        { required: true, message: "请输入手机验证码", trigger: "blur" },
                    ],
                },
                newMobileRuleValidate: {
                    mobile: [
                        { required: true, message: "请输入新手机号", trigger: "blur" },
                    ],
                    captcha: [
                        { required: true, message: "请输入手机验证码", trigger: "blur" },
                    ],
                },
                emailRuleValidate: {
                    email: [{ required: true, message: "请输入新邮箱", trigger: "blur" }],
                    captcha: [
                        { required: true, message: "请输入邮箱验证码", trigger: "blur" },
                    ],
                },
            };
        },
        methods: {
            submit() {
                let province = this.value[0];
                let city = this.value[1];
                let region = this.value[2];
                memberupdateInfo({
                    qq: this.personalData.qq,
                    province: this.personalData.province,
                    city: this.personalData.city,
                    province,
                    city,
                    region,
                    address: this.personalData.address,
                    description: this.personalData.description,
                }).then(() => {
                    this.update = false;
                    setInfo();
                    this.getData();
                });
            },
            toUpdateMobile() {
                this.updateMobile = true;
            },
            toEmail() {
                this.email = true;
            },
            sms_captcha() {
                const TIME_COUNT = 60;
                if (!this.timer) {
                    memberSmsCaptcha().then();
                    this.count = TIME_COUNT;
                    this.show = false;
                    this.timer = setInterval(() => {
                        if (this.count > 0 && this.count <= TIME_COUNT) {
                            this.count--;
                        } else {
                            this.show = true;
                            clearInterval(this.timer);
                            this.timer = null;
                        }
                    }, 1000);
                }
            },
            email_captcha() {
                if (this.newEmail.email) {
                    const TIME_COUNT = 60;
                    if (!this.timer) {
                        captchaUniversalMail({
                            email: this.newEmail.email,
                        }).then();
                        this.count = TIME_COUNT;
                        this.show = false;
                        this.timer = setInterval(() => {
                            if (this.count > 0 && this.count <= TIME_COUNT) {
                                this.count--;
                            } else {
                                this.show = true;
                                clearInterval(this.timer);
                                this.timer = null;
                            }
                        }, 1000);
                    }
                } else {
                    this.$Message.error("请输入邮箱号");
                }
            },
            handlePhoneCaptcha(value, values) {
                captchaUniversalSms({
                    mobile: values.mobile,
                    captchaKey: this.captchaPicture.key,
                    captcha: values.picCaptcha,
                }).then();
            },
            handlePicCaptcha() {
                AccountCaptchaPicture().then((res) => {
                    this.captchaPicture = res;
                });
            },
            toNext() {
                this.$refs["formValidate"].validate((valid) => {
                    if (valid) {
                        console.log(111);
                        memberSmsValidate({
                            sms_captcha: this.oldCaptcha.captcha,
                        }).then(() => {
                            this.newMobile = true;
                        });
                    }
                });
            },
            handleSubmit(valid, values) {
                if (valid) {
                    if (valid) {
                        const { mobile, phoneCaptcha } = values;
                        memberUpdatePhone({
                            mobile,
                            sms_captcha: phoneCaptcha,
                        }).then(() => {
                            this.updateMobile = false;
                            this.newMobile = false;
                            setInfo();
                            this.getData();
                        });
                    }
                }
            },
            updateEmail() {
                memberUpdateEmail({
                    email: this.newEmail.email,
                    email_captcha: this.newEmail.captcha,
                }).then(() => {
                    this.email = false;
                    setInfo();
                    this.getData();
                });
            },
            getData() {
                memberInfo().then((res) => {
                    this.personalData = res;
                    this.value = [
                        this.personalData.province,
                        this.personalData.city,
                        this.personalData.region,
                    ];
                    if (
                        this.personalData.realName == 1 &&
                        this.personalData.enterprise == 0
                    ) {
                        this.personalData.authentication = "已认证为 个人账号";
                    }
                    if (
                        this.personalData.realName == 1 &&
                        this.personalData.enterprise == 1
                    ) {
                        this.personalData.authentication = "已认证为 企业账号";
                    }
                    let province = this.district.filter((item) => {
                        return item.value == this.personalData.province;
                    });
                    let city = province[0].children.filter((item) => {
                        return item.value == this.personalData.city;
                    });
                    let region = city[0].children.filter((item) => {
                        return item.value == this.personalData.region;
                    });
                    this.address =
                        province[0].label + " " + city[0].label + " " + region[0].label;
                });
            },
        },
        created() {
            this.district = district;
            this.getData();
            AccountCaptchaPicture().then((res) => {
                this.captchaPicture = res;
            });
            if (this.$route.query.val == "email") {
                this.email = true;
            }
            if (this.$route.query.val == "mobile") {
                this.updateMobile = true;
            }
        },
    };
</script>

<style lang="less" scoped>
.page-gird-container {
  box-shadow: rgba(10, 32, 51, 0.12) 0px 1px 3px 0px;
  padding: 24px;
  background-color: #fff;
  .title {
    font-weight: 900;
    font-size: 16px;
    margin-bottom: 20px;
  }
}
.picCaptcha {
  .ivu-btn {
    span {
      width: 100%;
      height: 100%;
      img {
        width: 100%;
        height: 100% !important;
        top: 0 !important;
      }
    }
  }
}
.demo-login-captcha .ivu-btn {
  padding: 0;
}
.demo-login-captcha .ivu-btn img {
  height: 28px;
  position: relative;
  top: 4px;
}
</style>
